<template>
	<div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>个人中心</div>
			<div @click="navigation"><img src="../assets/navgation.png"></div>
		</header>
		
		<div class="navigation_d" v-show="navShow">
			<div @click="home">首页</div>
			<div @click="my">我的</div>
			<div @click="seek">搜索</div>
			<div @click="news">消息</div>
		</div>
		
		<div class="picCarousel">
			<mt-swipe :auto="4000">
				<mt-swipe-item v-for="item in data.banner"><img :src="item" class="silderimg"></mt-swipe-item>
				<!--<mt-swipe-item>2</mt-swipe-item>
				<mt-swipe-item>3</mt-swipe-item>-->
			</mt-swipe>
		</div>
		<div class="activeimg" v-show="bannerShow"><img :src="data.bannerTip"></div>
		<!--
        	作者：lanlimei
        	时间：2018-01-16
        	描述：商品信息
        -->
		<div class="goodinfo">
			<div class="goodname">{{data.goodsName}}</div>
			<div class="goodpricecon">
				<span class="saleprice"><i class="priceSymbol">￥</i>{{data.conPrice}}</span>
				<span class="masterprice">￥{{data.price}}</span>
				<span class="earnmoney" style="display: none;">赚{{data.wlCommission}}</span>
			</div>
			<div class="goodsware">
				<span class="freefreight" v-if="data.isFreePost == 1">免运费</span>
				<span class="freefreight" v-else-if="data.isFreePost == 0">不包邮</span>
				<span class="salename">销量{{data.totalSales}}件</span>
			</div>
			<ul class="serviceguareen">
				<li class="sameservce" v-if="data.isQualityAssurance == 1"><i class="sameservceimg"></i><span class="sameservce-name">正品保证</span></li>
				<li class="sameservce" v-else-if="data.isQualityAssurance == 0" style="display: none;"><i class="sameservceimg"></i><span class="sameservce-name">正品保证</span></li>
				<li class="sameservce" v-if="data.isServenBack == 1"><i class="sameservceimg"></i><span class="sameservce-name">七天退换货</span></li>
				<li class="sameservce" v-if="data.isServenBack == 0" style="display: none;"><i class="sameservceimg"></i><span class="sameservce-name">七天退换货</span></li>
				<li class="sameservce" v-if="data.isOnTime == 1"><i class="sameservceimg"></i><span class="sameservce-name">准时达</span></li>
				<li class="sameservce" v-if="data.isOnTime == 0" style="display: none;"><i class="sameservceimg"></i><span class="sameservce-name">准时达</span></li>
			</ul>

		</div>
		<!--
        	作者：offline
        	时间：2018-01-17
        	描述：促销类目
       -->
		<div class="procategory" v-if="data.isCanBuy == 'yes'" style="display: none;">
			<img src="http://file.jhjvip.cn/images/e445e29b-2fde-4efc-bdb7-60daa00462a9.jpg">
		</div>
		<div class="procategory" v-else-if="data.isCanBuy == 'no'">
			<img :src="data.buyTip">
		</div>
		<div class="samecoupon fullout" style="display: none;">
			<span class="samecoupon-title">优惠券</span>
			<span class="samecoupon-text">领取优惠券</span>
			<i class="samecoupon-right"></i>
		</div>
		<div class="addcoupn">
			<div class="samecoupon" v-for="item in data.fullcuts">
				<span class="samecoupon-title">优惠券</span>
				<span class="samecoupon-text">{{item.name}}</span>
				<i class="samecoupon-right"></i>
			</div>
		</div>
		<div class="samecoupon fullout" v-on:click="buyEvent()" v-show="buyEvamthide">

			<!--<span class="samecoupon-text">选择 {{data.propertyNames}}</span>-->
			<span class="samecoupon-text">选择规格</span>
			<i class="samecoupon-right"></i>
		</div>

		<mu-tabs :value="activeTab" @change="handleTabChange">
			<mu-tab value="tab1" title="商品介绍" />
			<mu-tab value="tab2" title="规格参数" />
			<mu-tab value="tab3" @active="handleActive" title="宝贝评价" />
		</mu-tabs>
		<div v-if="activeTab === 'tab1'">
			<div class="prodetailimg">
				<img v-for="item in data.detailImages" :src="item" alt="">
				<!--<img src="http://file.jhjvip.cn/images/759ea077-7c4a-4cdb-a368-97b05b5a5bdd.jpg" alt="">
				<img src="http://file.jhjvip.cn/images/68bcdb4e-3d39-4ef0-9fd7-0101c7cbd805.jpg" alt="">
				<img src="http://file.jhjvip.cn/images/9a329f60-401e-4e19-b04b-9eaff7372bb5.jpg" alt="">
				<img src="http://file.jhjvip.cn/images/82a80dcb-0555-48b0-9348-ac51a171fbe0.jpg" alt="">
				<img src="http://file.jhjvip.cn/images/54db5271-5fcd-42b6-8cc2-2594735d26d0.jpg" alt="">-->
			</div>
		</div>
		<div v-if="activeTab === 'tab2'">
			<div class="specpara">
				<ul class="specpara-ul">
					<li class="samespec-li" v-for="item in data.specs">
						<span class="spectitle">{{item.name}}</span>
						<label class="specfont">{{item.value}}</label>
					</li>
					<!--<li class="samespec-li">
						<span class="spectitle">品牌</span>
						<label class="specfont">香奈儿</label>
					</li>
					<li class="samespec-li">
						<span class="spectitle">品牌</span>
						<label class="specfont">香奈儿</label>
					</li>
					<li class="samespec-li">
						<span class="spectitle">品牌</span>
						<label class="specfont">香奈儿</label>
					</li>
					<li class="samespec-li">
						<span class="spectitle">品牌</span>
						<label class="specfont">香奈儿</label>
					</li>
					<li class="samespec-li">
						<span class="spectitle">品牌</span>
						<label class="specfont">香奈儿</label>
					</li>-->

				</ul>
			</div>
		</div>
		<div v-if="activeTab === 'tab3'">
			<div class="evalutemodule">
				<ul>
					<li :class="current" v-on:click="evalbut('all')">全部({{judge.total}})</li>
					<li v-on:click="evalbut('image')">有图({{judge.imageTotal}})</li>
				</ul>
			</div>
			<div class="assessmain">
				<ul>
					<li class="sameassess-li" v-for="item in judge.list">
						<div class="userinfo">
							<div class="username">
								<div class="userimg"><img :src="item.userHeadImg"></div>
								<span class="userfont">{{item.userNickName}}</span>
							</div>
							<div class="gradecon">
								<i class="praisegrade" v-for="(key,val) in data.descLevel"></i>

							</div>
						</div>
						<label class="assessdate">{{item.createTime}}</label>
						<span class="goodevalute">{{item.content}}</span>
						<div class="goodpic">
							<div class="samegoodimg" v-for="imgObj in item.img"><img :src="imgObj"></div>
							<!--<div class="samegoodimg"></div>
							<div class="samegoodimg"></div>
							<div class="samegoodimg"></div>
							<div class="samegoodimg"></div>-->
						</div>
					</li>
				</ul>
			</div>
		</div>

		<!--
        	作者：offline
        	时间：2018-01-17
        	描述：购物车悬浮框
        -->
		<div class="footer">
			<div class="otreh-handle">
				<a class="kefu" style="display: none;">
					<i></i>
					<p>客服</p>
				</a>
				<a class="love" @click="collectgood()" style="display: none;">
					<i></i>
					<p>收藏</p>
				</a>
				<a class="shopcart" @click="cartbut()">
					<i></i>
					<p>购物车</p>
				</a>
			</div>
			<div class="buy-handle">

				<a class="buy-now" @click="purchasebut()">立即购买</a>
			</div>
		</div>
		<!--
	    	作者：offline
	    	时间：2018-01-17
	    	描述：选择商品类型的蒙版
	    -->

		<div class="nctouch-bottom-mask" v-show="isShow">
			<div class="nctouch-bottom-mask-bg"></div>
			<div class="nctouch-bottom-mask-block">
				<div class="goods-options-info">
					<div class="goodspic"><img :src="goodimg"></div>
					<div class="goodstock">
						<span class="goodsprice">￥{{goodstype.sku.price}}</span>
						<span class="samegoodsty">库存{{goodstype.sku.inventory}}件</span>
						<span class="samegoodsty">已选 <span v-for='sel in value'>"{{sel}}"</span> </span>
					</div>
					<div class="closebut" v-on:click="hidemask()">X</div>
				</div>
				<div class="nctouch-bottom-mask-rolling">
					<div class="goods-options-stock">

						<dl class="spec" v-for="(item,i) in goodstype.propertys" :key="i">
							<dt>{{item.propertyName}}</dt>
							<dd>
								<!--<a class="currents">白色</a>-->
								<a v-for="(fontObj,index) in item.propertyValues" :class="{'currents':index == select[i]}" @click="protypebut(index,i,fontObj.id)">{{fontObj.value}}</a>
							</dd>

						</dl>
						<!--<dl class="spec">
							<dt>尺码</dt>
							<dd>
								<a class="currents">M</a>
								<a>L</a>
								<a>XL</a>
							</dd>
						</dl>-->
					</div>
				</div>
				<div class="goods-option-value">购买数量
					<div class="value-box">
						<span class="minus" @click="subtractbut()"><a></a></span>
						<span class="buyval"><input type="text" class="buy-num" value="1" ref="buynum"></span>
						<span class="add" @click="addstock(goodstype.sku.inventory)"></span>
					</div>
				</div>
			</div>
		</div>
	</div>

</template>
<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { getSkuByProperty } from '../Baseurl/common.js';
	import { yhdetail } from '../Baseurl/common.js';
	import { buyinter } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	import { gzhUrl } from '../Baseurl/common.js';
	export default {
		data() {
			return {
				activeTab: 'tab1',
				isShow: false,
				data: [],
				judge: [],
				picimg: [],
				goodstype: [],
				current: true,
				select: [0, 0],
				modjson: [0, 0, 0],
				newjson: [],
				goodimg: 'fff',
				skuid: '',
				token: '',
				newId: '',
				bannerShow: false,
				spuId: '',
				goodsId: '',
				goodimg:'ss',
				value:[],
				buyEvamthide:false,
				navShow:false,
				//imgObjs:[]
			}

		},
		created() {
			/*var href = window.location.href;
			var yunid = href.split('?')[1].split('&')[1];
			localStorage.setItem('yunId', yunid);*/
			this.token = localStorage.getItem('token');
			var href = window.location.href;
			this.goodsId = href.split('?')[1];
			var url = BaseUrl + yhdetail + '?' + this.goodsId;
			this.$http.get(url).then(res => {
				if(res.data.code == "10000") {
					this.data = res.data.data;
					var json = this.data.goodsSku;
					var json1 = this.goodstype.propertys;
					var bannertip = this.data.bannerTip;
					if(bannertip.length == 0) {
						this.bannerShow = false;
					} else {
						this.bannerShow = true;
					}
					if(this.data.propertys.length == 0){
						this.buyEvamthide = false;
					}else{
						this.buyEvamthide = true;
					}
					for(var i = 0; i < json.length; i++) {
						if(json[i].isMain == "1") {
							
							if(json[i].paramQuery == "") {
								this.skuid = json[i].id;
								
							} else {
								this.modjson = json[i].paramQuery.split(':');
								var goodjson = this.goodstype.propertys;
								var seleJson = [];
								for(var j = 0; j < goodjson.length; j++) {
									var paraJson = json[i].paramQuery.split(':');
									var goodJson1 = goodjson[j].propertyValues;
									for(var v = 0; v < paraJson.length; v++) {
										//console.log(paraJson[v]);
										for(var obj = 0; obj < goodJson1.length; obj++) {
											if(goodJson1[obj].id == paraJson[v]) {
												//console.log(obj)
												seleJson += ':' + obj;
											}
											//console.log(goodJson1[obj],paraJson[v])
										}
									}

								}
								if(seleJson.substr(0, 1) == ':') seleJson = seleJson.substr(1);
								this.select = seleJson.split(':');
							}

						}
					}
					var newmodJson = this.modjson;
					var newmodSplit = '';
					for(var i = 0; i < newmodJson.length; i++) {

						newmodSplit += ':' + newmodJson[i];

					}
					if(newmodSplit.substr(0, 1) == ':') newmodSplit = newmodSplit.substr(1);
					var newurl = BaseUrl + getSkuByProperty + '?parmQuery=' + newmodSplit;
					this.$http.get(newurl).then(res => {
						this.skuid = res.data.data.list[0].id;
						//console.log(this.skuid);
					})
				} else {
					Toast({
						message: res.data.msg,
						position: 'middle',
						duration: 3000
					});
				}

			})
			var evalurl = BaseUrl + 'yh/getSpuFeedbacks?' + this.goodsId;
			this.$http.get(evalurl).then(res => {
				var json = res.data.data.list;
				for(var i = 0; i < json.length; i++) {
					var img = json[i].images.split(',');
					json[i].img = img

				}
				this.judge = res.data.data;

			})
			var mainsty = BaseUrl + 'yh/getskuPropertys?' + this.goodsId;
			this.$http.get(mainsty).then(res => {

				this.goodstype = res.data.data;
				this.goodimg = this.goodstype.sku.skuImage;
			})

		},

		methods: {
			//导航退后
			retreat:function(){
				window.history.go(-1);
			},
			//导航
			navigation:function(){
				this.navShow = !this.navShow;
			},
			//首页
			home:function(){
				this.$router.push({ path: '/index' })
			},
			//我的
			my:function(){
				this.$router.push({ path: '/personalContent' })
			},
			//搜索
			seek:function(){
				this.$router.push({ path: '/seekgoods' })
			},
			//消息
			news:function(){
				this.$router.push({ path: '/news' })
			},
			handleTabChange(val) {
				this.activeTab = val

			},
			handleActive() {
				//window.alert('tab active')
			},
			buyEvent: function() {
				this.isShow = true;
			},
			evalbut: function(obj) {
				//alert(obj);
				if(obj == "all") {
					//this.setAttribute("class",'current')
					var evalurl = BaseUrl + 'yh/getSpuFeedbacks?' + this.goodsId;
					this.$http.get(evalurl).then(res => {
						var json = res.data.data.list;
						for(var i = 0; i < json.length; i++) {
							var img = json[i].images.split(',');
							json[i].img = img
							//console.log(json[i].images)
						}
						this.judge = res.data.data;
						//console.log(this.judge.list);
					})
				} else {
					//this.setAttribute("class",'current')
					var evalurl = BaseUrl + "yh/getSpuFeedbacks?&type=image" + this.goodsId;
					this.$http.get(evalurl).then(res => {
						var json = res.data.data.list;
						for(var i = 0; i < json.length; i++) {
							var img = json[i].images.split(',');
							json[i].img = img
							//console.log(json[i].images)
						}
						this.judge = res.data.data;
						//console.log(this.judge.list);
					})
				}
			},
			hidemask: function() {
				this.isShow = false;
			},
			splitimg: function(json) {
				var imgObjs = [];
				this.picimg = json.split(',');
				var length = this.picimg.length;
				for(var i = 0; i < length; i++) {
					var img = this.picimg[i];
					var imgObj = {
						img: img
					}
					imgObjs.push(imgObj);
				}

				return imgObjs;
			},
			protypebut: function(index, i, id) {
				/*******属性选择******/
				//alert('11');
				this.select.splice(i, 1, index);
				this.value.splice(i,1,name);
				if(i == 0) {
					this.modjson[0] = id;
				} else if(i == 1) {
					this.modjson[1] = id;
				} else if(i == 2) {
					this.modjson[2] = id;
				}

				var arr = this.modjson;
				var arrNew = [];
				for(var i in arr) {
					if(arr[i] !== 0) {
						arrNew.push(arr[i]);
					}
				}
				this.newjson = arrNew
				var json = this.goodstype.propertys;
				var skuid = this.goodstype.sku.skuId;
				var nameValueIds = '';
				if(arrNew.length == json.length) {
					for(var i in arrNew) {

						nameValueIds += ":" + arrNew[i];

					}
					if(nameValueIds.substr(0, 1) == ':') nameValueIds = nameValueIds.substr(1);

					var newurl = BaseUrl + getSkuByProperty + '?parmQuery=' + nameValueIds;
					this.$http.get(newurl).then(res => {
						//console.log(res.data.data.list[0].skuDetails);
						this.goodimg = res.data.data.list[0].skuDetails;
						this.skuid = res.data.data.list[0].id;
					})
				}

			},
			addstock: function(obj) {
				/******加号事件*******/
				var val = this.$refs.buynum.value;
				if(parseInt(val) < obj) {
					this.$refs.buynum.value = parseInt(val) + 1;
				}

			},
			subtractbut: function() {
				var val = this.$refs.buynum.value;
				if(parseInt(val) > 1) {
					this.$refs.buynum.value = parseInt(val) - 1;
				}
			},
			purchasebut: function() {
				/***********立刻购买***************/
//				console.log(this.skuid);
				var id = this.skuid;
				var val = this.$refs.buynum.value;
				var sku = this.skuid + '-' + val;

					this.$router.push({
						path: '/pay?skuIdCounts=' + sku
					})

				/*var evalurl = BaseUrl + buyinter+'?token='+ this.token+'&appId=gzh&skuIdCounts='+id+':'+val;
				this.$http.get(evalurl).then(res => {
					if(res.data.code == "10000"){
						alert('立刻购买');
						
					}else{
						Toast({
							message: res.data.msg,
							position: 'middle',
							duration: 3000
						});
					}*/

				//					console.log(this.buyshop);
				/*})*/
			},
			cartbut: function() {
				/*********加入购物车*******/
				var val = this.$refs.buynum.value;
				var skuid = this.skuid
				var evalurl = BaseUrl + 'users/addshoppingcart?token=' + this.token + '&appId=wap&skuId=' + skuid + '&count=' + val;
				this.$http.get(evalurl).then(res => {

					if(res.data.code == "10000") {
						Toast({
							message: '加入购物车',
							position: 'middle',
							duration: 3000
						});
						this.$router.push({
							path: '/cart'
						})
					} else {
						Toast({
							message: res.data.msg,
							position: 'middle',
							duration: 3000
						});
					}

				})
			},
			collectgood: function() {
				var evalurl = BaseUrl + 'users/addcollect?token=' + this.token + '&appId=wap&goodsId=1';
				this.$http.get(evalurl).then(res => {
//					alert('收藏成功');

				})
			}

		}
	}
</script>

<style scoped="scoped">
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.24rem;
		color: #323232;
		font-size: 0.36rem;
		border-bottom: 1px solid #CCCCCC;
	}
	
	.navigation div:nth-child(1) img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	.navigation div:nth-child(3) img{
		width: 0.4rem;
		height: 0.6rem;
		display: block;
	}
	.silderimg {
		width: 100%;
		/*height: 100%;*/
	}
	/********蒙版********/
	
	.navigation_d{
		width: 1.8rem;
		position:fixed;
		z-index: 9;
		top: 1rem;
		right: 0;
	}
	.navigation_d div{
		width: 100%;
		height: 0.8rem;
		text-align: center;
		line-height: 0.8rem;
		background: rgba(0,0,0,0.5);
		margin-bottom: 0.05rem;
		color: #FFFFFF;
	}	
	
	.nctouch-bottom-mask {
		position: fixed;
		z-index: 20;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
	}
	
	.nctouch-bottom-mask-bg {
		display: block;
		position: absolute;
		z-index: 21;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.65);
	}
	
	.nctouch-bottom-mask-block {
		display: block;
		position: absolute;
		z-index: 22;
		bottom: 0;
		left: 0;
		right: 0;
		min-height: 6.9rem;
		background: #FFF;
	}
	
	.goods-options-info {
		padding: 0.3rem 0.25rem;
		position: relative;
		z-index: 1;
		display: block;
		border-bottom: solid 0.01rem #CCCCCC;
		font-size: 0;
	}
	
	.goodspic {
		display: inline-block;
		z-index: 1;
		top: 0.5rem;
		left: 0.5rem;
		width: 2.2rem;
		height: 2.2rem;
	}
	
	.goodspic>img {
		width: 100%;
		height: 100%;
	}
	
	.goodstock {
		width: 30%;
		height: 2.2rem;
		display: inline-block;
		margin-left: 0.3rem;
	}
	
	.goodsprice {
		display: table;
		font-size: 0.32rem;
		color: #ff2040;
		margin-top: 0.8rem;
	}
	
	.samegoodsty {
		font-size: 0.28rem;
		color: #323232;
		display: table;
	}
	
	.closebut {
		width: 0.6rem;
		height: 0.6rem;
		border: solid 1px #b5b5b5;
		border-radius: 50%;
		display: inline-block;
		float: right;
		font-size: 0.32rem;
		text-align: center;
		line-height: 0.6rem;
	}
	
	.nctouch-bottom-mask-rolling {
		min-height: 1.9rem;
		overflow: hidden;
		position: relative;
		z-index: 1;
	}
	
	.goods-options-stock {
		padding: 0 0.25rem;
	}
	
	.spec {
		border-bottom: solid 0.01rem #CCCCCC;
	}
	
	.spec>dt {
		display: block;
		height: 0.5rem;
		color: rgb(50, 50, 50);
		font-size: 0.28rem;
		line-height: 0.5rem;
		padding: 0.1rem 0px;
	}
	
	.spec>dd {
		display: block;
		font-size: 0rem;
	}
	
	.spec>dd>a {
		display: inline-block;
		height: 0.45rem;
		line-height: 0.3rem;
		font-size: 0.24rem;
		background: rgb(238, 238, 238);
		border-radius: 0.12rem;
		padding: 0.1rem 0.2rem;
		margin-left: 0.15rem;
		margin-bottom: 0.15rem;
		margin-top: 0.1rem;
		color: #323232;
	}
	
	.currents {
		color: #FFFFFF !important;
		background-color: #FF2040 !important;
	}
	
	.goods-option-value {
		display: block;
		height: 1.2rem;
		padding: 0.25rem;
		margin-bottom: 2rem;
		line-height: 0.8rem;
		color: #323232;
		font-size: 0.28rem;
	}
	
	.value-box {
		display: inline-block;
		float: right;
		font-size: 0;
	}
	
	.minus {
		width: 0.66rem;
		height: 0.6rem;
		background: url(../assets/value_minus.png);
		background-size: 100%;
		display: inline-block;
	}
	
	.add {
		width: 0.66rem;
		height: 0.6rem;
		background: url(../assets/value_add.png);
		background-size: 100%;
		display: inline-block;
	}
	
	.buy-num {
		width: 0.6rem;
		height: 0.6rem;
		padding: 0;
		font-size: 0.6rem;
		font-weight: lighter;
		line-height: 0.6rem;
		text-align: center;
		border: solid #eee;
		border-width: 0 0.05rem;
		border-radius: 0;
		background: #eeeeee;
		margin: 0 0.02rem;
		font-size: 0.36rem;
	}
	
	.buyval {
		display: inline-block;
		vertical-align: top;
		line-height: 0;
	}
	/*******/
	
	.aui-header {
		position: fixed;
		z-index: 9;
		top: 0;
		height: 1rem;
		background-color: #FFFFFF;
		color: #323232;
		right: 0;
		left: 0;
		width: 100%;
		font-size: 0.36rem;
		border-bottom: solid 1px #ccc;
	}
	
	.aui-pull-left {
		width: 0.2rem;
		height: 0.36rem;
		display: inline-block;
		/* padding: 0 0.25rem; */
		margin: 0.25rem;
	}
	
	.aui-pull-left>img {
		width: 100%;
		height: 100%;
	}
	
	.aui-title {
		line-height: 1rem;
		display: inline-block;
		margin-left: 2rem;
	}
	
	.rightbut {
		width: 0.43rem;
		height: 0.61rem;
		background: url(../assets/navgation.png);
		background-size: 100%;
		float: right;
		margin: 0.17rem;
	}
	
	.picCarousel {
		width: 100%;
		height: 6.06rem;
		/*		background: red;
*/
		margin-top: 1rem;
	}
	/*****活动背景*******/
	
	.activeimg {
		width: 100%;
		height: 0.9rem;
	}
	
	.activeimg>img {
		width: 100%;
		height: 100%;
		display: block;
	}
	/*******商品信息**********/
	
	.goodinfo {
		padding: 0.25rem;
		padding-bottom: 0;
		background-color: #FFFFFF;
		margin-bottom: 0.16rem;
	}
	
	.goodname {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 0.32rem;
		color: #323232;
		line-height: 0.4rem;
		/* line-height: 2.5vh; */
	}
	
	.goodpricecon {
		line-height: 0.65rem;
		height: 0.65rem;
	}
	
	.saleprice {
		color: #ff2040;
		font-size: 0.46rem;
		float: left;
	}
	
	.priceSymbol {
		font-size: 0.32rem;
		font-style: normal;
	}
	
	.masterprice {
		font-size: 0.32rem;
		color: #989898;
		text-decoration: line-through;
		margin-left: 0.12rem;
		float: left;
	}
	
	.earnmoney {
		float: right;
		font-size: 0.32rem;
		color: #FF2040;
	}
	
	.goodsware {
		line-height: 0.46rem;
		border-bottom: solid 0.01rem #CCCCCC;
		margin-top: 0.1rem;
		height: 0.46rem;
	}
	
	.freefreight {
		font-size: 0.24rem;
		color: #989898;
		float: left;
	}
	
	.salename {
		font-size: 0.24rem;
		color: #989898;
		float: right;
	}
	
	.serviceguareen {
		width: 100%;
		height: 0.8rem;
	}
	
	.sameservce {
		display: inline-block;
		line-height: 0.8rem;
		width: 25%;
		height: 0.8rem;
		line-height: 0.8rem;
		float: left;
		margin-left: 0.2rem;
	}
	
	.sameservce:nth-child(1) {
		margin-left: 0px;
	}
	
	.sameservceimg {
		width: 0.22rem;
		height: 0.22rem;
		background: url(../assets/hook.png);
		background-size: 100%;
		display: block;
		margin-top: 0.3rem;
		float: left;
	}
	
	.sameservce-name {
		font-size: 0.24rem;
		float: left;
		margin-left: 0.15rem;
		color: #989898;
	}
	
	.procategory {
		width: 100%;
		height: 0.9rem;
		background-color: #feece9;
		display: flex;
	}
	
	.procategory>img {
		width: 100%;
		height: 100%;
	}
	
	.salepic {
		width: 0.56rem;
		height: 0.56rem;
		/*		background: red;
*/
		margin: 0.18rem;
	}
	
	.salepro {
		font-size: 0.25rem;
		color: #f10136;
		line-height: 0.9rem;
	}
	
	.samecoupon {
		padding: 0.25rem;
		background: #FFFFFF;
		border-bottom: solid 0.01rem #CCCCCC;
		height: 0.9rem;
		display: flow-root;
	}
	
	.samecoupon:first-child {
		margin-top: 0.16rem;
	}
	
	.fullout {
		margin-top: 0.16rem;
	}
	
	.samecoupon-title {
		color: #FF2040;
		font-size: 0.24rem;
		border: solid 0.01rem #FF2040;
		padding: 0.03rem 0.1rem;
		border-radius: 0.05rem;
		float: left;
	}
	
	.samecoupon-text {
		color: #323232;
		font-size: 0.28rem;
		margin-left: 0.1rem;
		float: left;
	}
	
	.samecoupon-right {
		width: 0.12rem;
		height: 0.21rem;
		background: url(../assets/return.png);
		background-size: 100%;
		float: right;
		display: block;
	}
	/*****详情图*****/
	
	.mu-tab-link {
		color: #323232;
	}
	
	.mu-tab-active {
		color: #ff2040;
	}
	
	.mu-tabs {
		background-color: #FFFFFF;
		color: #323232 !important;
	}
	
	.prodetailimg {
		width: 100%;
		height: 100%;
		margin-bottom: 1rem;
	}
	
	.prodetailimg>img {
		width: 100%;
		height: 100%;
		display: block;
	}
	
	.specpara {
		width: 100%;
		height: 100%;
		margin-bottom: 1rem;
	}
	
	.specpara-ul {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		padding: 0 0.15rem;
	}
	
	.samespec-li {
		width: 100%;
		height: 0.87rem;
		border-bottom: solid 0.01rem #CCCCCC;
		line-height: 0.87rem;
	}
	
	.samespec-li:nth-child(1) {
		border-top: solid 0.01rem #CCCCCC;
	}
	
	.spectitle {
		font-size: 0.28rem;
		color: #989898;
	}
	
	.specfont {
		font-size: 0.28rem;
		color: #323232;
		margin-left: 1rem;
	}
	/*******评价********/
	
	.evalutemodule {
		width: 100%;
		padding: 0.3rem 0.15rem;
		background-color: #FFFFFF;
		border-top: solid 0.01rem #CCCCCC;
	}
	
	.evalutemodule>ul {
		width: 100%;
	}
	
	.evalutemodule>ul>li {
		display: inline-block;
		background-color: #eee;
		padding: 0.05rem 0.25rem;
		border-radius: 0.5rem;
		font-size: 0.24rem;
		margin-left: 0.2rem;
	}
	
	.evalutemodule>ul>li:nth-child(1) {
		margin-left: 0rem;
	}
	
	.current {
		background-color: #ffd2d8 !important;
	}
	/*****评价数据*****/
	
	.assessmain {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		margin-bottom: 1rem;
	}
	
	.assessmain>ul {
		width: 100%;
	}
	
	.sameassess-li {
		width: 95%;
		padding: 0.25rem;
		border-top: solid 0.01rem #ccc;
	}
	
	.userimg {
		width: 0.6rem;
		height: 0.6rem;
	}
	
	.userimg>img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.username {
		line-height: 0.6rem;
		display: inline-flex;
		font-size: 0.28rem;
		color: #323232;
	}
	
	.userfont {
		margin-left: 0.1rem;
	}
	
	.gradecon {
		float: right;
		margin-top: 0.25rem;
	}
	
	.praisegrade {
		width: 0.22rem;
		height: 0.2rem;
		display: block;
		background: url(../assets/redgrade.png);
		background-size: 100%;
		float: left;
		margin-left: 0.07rem;
	}
	
	.assessdate {
		line-height: 0.35rem;
		color: #989898;
		font-size: 0.24rem;
	}
	
	.goodevalute {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 0.28rem;
		color: #323232;
	}
	
	.goodpic {
		width: 100%;
		height: 100%;
		font-size: 0;
	}
	
	.samegoodimg {
		width: 1.59rem;
		height: 1.59rem;
		/*		background: red;
*/
		margin-left: 0.2rem;
		display: inline-block;
	}
	
	.samegoodimg>img {
		width: 100%;
		height: 100%;
	}
	
	.samegoodimg:nth-child(1) {
		margin-left: 0rem;
	}
	
	.samegoodimg:nth-child(5) {
		margin-left: 0rem;
		margin-top: 0.15rem;
	}
	/*******底部********/
	
	.footer {
		position: fixed;
		width: 100%;
		height: 0.95rem;
		background: #FFFFFF;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 23;
	}
	
	.otreh-handle {
		width: 50%;
		float: left;
		/*background: red;*/
		height: 100%;
		font-size: 0;
	}
	
	.otreh-handle>a {
		position: relative;
		z-index: auto;
		display: inline-block;
		height: 0.95rem;
		text-align: center;
		color: #333;
	}
	
	.otreh-handle>a>i {
		display: block;
		width: 0.38rem;
		height: 0.38rem;
		margin: 0 auto;
		background-repeat: no-repeat;
		/*background-position: 50% 50%;*/
		background-size: 100%;
		opacity: 0.65;
		margin-top: 0.15rem;
	}
	
	.otreh-handle>a>p {
		font-size: 0.24rem;
		color: #989898;
	}
	
	.kefu {
		width: 33%;
	}
	
	.love {
		width: 33%;
	}
	
	.shopcart {
		width: 33%;
	}
	
	.kefu>i {
		background: url(../assets/newsimg.png);
	}
	
	.love>i {
		background: url(../assets/love.png);
	}
	
	.shopcart>i {
		background: url(../assets/shopcat.png);
	}
	
	.buy-handle {
		float: right;
		width: 50%;
		font-size: 0;
		background-color: #ff2040;
	}
	.shopcart{
		width: 100%;
	}
	.buy-now {
		display: block;
		height: 0.95rem;
		font-size: 0.32rem;
		color: #FFF;
		text-align: center;
		line-height: 0.95rem;
	}
</style>